/**
 * @fileOverview
 * @author xiaoF
 * @since 2018/8/10.
 */
"use strict";

import React, {Component} from 'react';
import ReactDOM from 'react-dom';


import './style.css';

class MenuII extends Component {
    render() {
        let style = {
            display: this.props.displayStyle
        };
        return (
            <ul id="menu2" onMouseLeave={this.props.onMenuWillHide} style={style}>
                <li className="menu-2">二级菜单</li>
                <li className="menu-2">二级菜单</li>
                <li className="menu-2">二级菜单</li>
            </ul>
        )
    }
}


class Menu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            display: 'none'
        };
    }

    showMenuII = () => {
        this.setState({
            display: 'block'
        });
    };

    hideMenuII = () => {
        this.setState({
            display: 'none'
        });
    };


    render() {
        return (
            <div>
                <ul className="menu-ul">
                    <li className="menu-1" onMouseOver={this.showMenuII} onMouseLeave={this.hideMenuII}>
                        一级菜单
                        <MenuII displayStyle={this.state.display}/>
                    </li>

                </ul>
            </div>
        )
    }
}

ReactDOM.render(
    <Menu></Menu>,
    document.getElementById('app')
);
